<template>
  <div id="views">
    <section id="box">
      <div class="choseCardType hoverhand"  @click="windowShowReverse()">
        <span class="title">选择您的证件类型</span>
        <span class="arrowright"></span>
        <span class="cardName">{{cardName}}</span>
      </div>
      <div>
        <input type="text" placeholder="请输入您的英文名称" v-model="engName">
      </div>
      <div>
        <input type="text" placeholder="请输入您的中文名称" v-model="chinaName">
      </div>
      <div>
        <input type="text" placeholder="请输入您的证件号" v-model="idcardNumber">
      </div>
    </section>
    <p class="reminder">温馨提示：所填信息必须和证件上保持一致</p>
    <button class="yellowbtn" :class="btnClass" id="nextStep" @click="nextStep">下一步</button>
    <div class="cover" v-if="windowshow"  @click="windowShowReverse()"></div>
    <transition name="slide">
      <div class="cardType" v-if="windowshow">
        <p class="setting">
          <button class="cancel" @click="windowShowReverse()">取消</button>
          <button  class="confirm" @click="windowShowReverse()">确定</button>
        </p>
        <div class="cards">
          <p class="hoverhand" :class="cardType == 0 || cardType == '' ? 'selected':''" @click="selectCard(0);windowShowReverse()">护照</p>
          <p class="hoverhand" :class="cardType == 1 ? 'selected':''" @click="selectCard(1);windowShowReverse()">台胞证</p>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
  export default {
      name:'foreign_verification',
      data(){
          return{
              introduce:'国外实名验证',
              chinaName:'',/*中文名*/
              engName:'',/*英文名*/
              idcardNumber:'',/*份证号*/
              cardType: 0,/*确认的证件类型*/
              windowshow:false,/*显示选择证件弹窗*/
              cardName : '护照' , /*证件类型名称（护照/台胞证）*/
              btnClass:'submitNot'
          }
      },
    computed : {
      listenChange () {
        return {  idcardNumber:this.idcardNumber , engName:this.engName , chinaName:this.chinaName };
      }
    },
    watch:{
      'listenChange'( val ){
        this.inputchange();
      }
    },
      methods:{
        inputchange(){
          this.btnClass =  this.idcardNumber && this.chinaName && this.engName  ? 'submit' : 'submitNot';
        },
          windowShowReverse(){
              this.windowshow = !this.windowshow
          },
          confirmSelect(){
              this.windowshow = !this.windowshow
          },
          selectCard( val ){
              this.cardType = val;
              this.cardName = val == 0 ? '护照':'台胞证';
          },
          nextStep(){
            let thiz = this;
            if( thiz.btnClass === 'submit'){
              thiz.$router.push({path:'/uploadidcard_foreign' , query:{
                  cardType : thiz.cardType , cardName:thiz.cardName , chinaName : thiz.chinaName ,engName:thiz.engName , idcardNumber:thiz.idcardNumber
              }})
            }
          }
      }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{
  padding:0.3rem;padding-top: 0.42rem;padding-bottom: 0.5rem;
}
  #box{
    background: #fff;padding:0 0.24rem;text-align: left;
    .title{font-size: 0.32rem;}
    input::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
    input::-moz-placeholder {color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
    input:-ms-input-placeholder{color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
    input{font-size: 0.32rem}
    >div{
      padding:0.33rem 0;border-bottom: 0.01rem solid#e5e5e5;position: relative;
    }
    >div:last-child{border-bottom: 0;}
    .choseCardType{
      >.title{
        color: #BDBFC2;
      }
      .cardName{float: right;padding-right: 0.45rem;font-size: 0.32rem}
      .arrowright{
        display: inline-block;width: 0.16rem;height: 0.26rem;background: url("../../common/imgs/arrowright.png") center center no-repeat;background-size: 100% 100%;
        float: right;position: absolute;right: 0rem;top:50%;margin-top: -0.13rem;
      }
    }
    input{width: 100%;}
  }
  .reminder{color: #F25B5B;font-size: 0.28rem;padding-top: 0.35rem;text-align: left}
  #nextStep{margin-top: 0.57rem;line-height: 0.88rem}
  .submitNot{background: #EFEFEF;}
  .cardType{
    z-index:6;left:0;position: fixed;bottom: 0;width: 100%;border-top-left-radius: 0.4rem;border-top-right-radius: 0.4rem;background: #fff;overflow: hidden;
    .setting{
      overflow: hidden;
      button{padding:0.35rem;padding-bottom: 0.45rem}
      .cancel{
        background: none;color: #898989;float: left;font-size: 0.32rem;
      }
      .confirm{
        background: none;color: #FFD203;float: right;font-size: 0.32rem;
      }
    }
  }
  .cards{
    p{
      font-size: 0.32rem;color: #cdcfd1;padding:0.35rem 0;;text-align: center;
    }
    .selected{
      color: #262626;background: #f3f3f3;font-family: 'PingFang-SC-Bold';
    }
  }
  @media screen and (min-width: 1025px){
    .cardType{width: 600px;left: 50%;margin-left: -300px;}
  }
  /*覆盖动画*/
  .slide-enter-active {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .slide-leave-active {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  @keyframes slideInUp {
    0% {
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }

    to {
      transform: translateZ(0);
    }
  }
  @keyframes slideOutDown {
    0% {
      transform: translateZ(0);
    }

    to {
      visibility: hidden;
      transform: translate3d(0, 100%, 0);
    }
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .cardType{
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
</style>
